<template>
  <div style="width: 860px;">
    <div class="table-page-search-wrapper"  >
      <a-form layout="inline" :form="form" :selfUpdate="true">
        <a-row >
          <a-col :span="10" style="padding: 0 4px;">
            <a-form-item label="收款日期">
              <a-range-picker allow-clear v-decorator="['time']" style="width: 100%;">
                <a-icon slot="suffixIcon" type="calendar"/>
              </a-range-picker>
            </a-form-item>
          </a-col>
          <a-col :span="6" style="padding: 0 4px;">
            <a-form-item label="收款人">
              <a-select
                :showSearch="true"
                option-filter-prop="children"
                allow-clear
                option-label-prop="label"
                style="width: 100%"
                v-decorator="['name']"
                placeholder="选择，搜索">
                <a-select-option v-for="item in allHisUser.userList" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <div class="table-page-search-submitButtons g-flex" style="margin-bottom: 4px;">
              <a-button type="primary" @click="clickSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="clickReset">重置</a-button>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!--表格-->
    <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange,columnWidth:40 }"
      bordered
      size="small"
      :columns="columns"
      :data-source="tableData"
      :rowKey="(record,index)=> index"
      :pagination="false"
    >
      <!--序号-->
      <template slot="index" slot-scope="text,record,index">
        <span>{{index+1}}</span>
      </template>

      <!--操作-->
      <template slot="action" slot-scope="text,record,index">
        <a-button style="padding:0;" type="link" @click="remove(record,index)">删除</a-button>
      </template>
    </a-table>
    <div slot="footer" class="g-flex g-x-end" style="margin-top: 20px;">
      <a-button type="primary" @click="submit" :loading="confirmLoading" :disabled="hasSelectRow">确定</a-button>
    </div>
  </div>


</template>

<script>
import {getDepositDetailInfo} from '@/api/modular/main/customer/cashier'
import moment from 'moment'
import { AllHisUser } from '@/api/customer/customer'

export default {
  props:{
    row_record:{
      type:Object,
      default:()=>{{}}
    }
  },
  data () {
    return {
      selectedRowKeys: [],
      allHisUser:{},
      visible:false,
      confirmLoading:false,
      form: this.$form.createForm(this),
      queryParam:{
        pageNum:1,
        pageSize:10
      },
      pagination:{
        pageSize:10
      },
      tableData:[],
      columns: [
        // { title: '序号', customRender: (text, record, index) => (this.queryParam.pageNum - 1) * this.pagination.pageSize + (index + 1), width: 40, ellipsis: true },
        {
          title: '基本信息',
          children: [
            { title: '预存款单号', dataIndex: 'id', key: 'id', width: 80, },
            { title: '客户卡号', dataIndex: 'cardNo', key: 'cardNo', width: 80, },
            { title: '客户姓名', dataIndex: 'name', key: 'name', width: 70, },
          ],
        },
        {
          title: '金额信息',
          children: [
            { title: '预存金额', dataIndex: 'rpAmt', key: 'rpAmt', width: 70, },
            { title: '已冲减', dataIndex: 'offsetAmt', key: 'offsetAmt', width: 60, },
            { title: '未冲减', dataIndex: 'offsetAmtNo', key: 'offsetAmtNo', width: 60, },
          ],
        },
        {
          title: '其他信息',
          children: [
            { title: '收款人', dataIndex: 'rpMan', key: 'rpMan', width: 60, },
            { title: '收款日期', dataIndex: 'rpDate', key: 'rpDate', width: 80, },
            { title: '摘要', dataIndex: 'adstract', key: 'adstract', width: 60, },
            { title: '备注', dataIndex: 'remarks', key: 'remarks', width: 60, },
          ],
        }
      ],
    }
  },
  computed:{
    hasSelectRow(){
      if(this.selectedRowKeys.length<=0){
        return true
      }
      return false
    }
  },
  methods: {
    show () {
      this.visible = true
      this.selectedRowKeys=[]
      this.form.resetFields()
      AllHisUser().then(res => {
        this.allHisUser = res
      })
      this.$nextTick(()=>{
        const customerId = this.row_record.customerId
        getDepositDetailInfo({customerId}).then(res=>{
          this.tableData=res.rows
        })
      })
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    handleCancel () {
      this.form.resetFields()
      this.visible = false
    },
    //点击查询-高级搜索
    clickSearch() {
      const form_values = this.form.getFieldsValue()
      const time = form_values.time
      if (time && time.length > 0) {
        form_values.beginTime = moment(time[0]).format('YYYY-MM-DD')
        form_values.endTime = moment(time[1]).format('YYYY-MM-DD')
        form_values.time=undefined
      }
      this.queryParam = Object.assign(this.queryParam,form_values)
      this.$refs.table.loadData()
    },
    clickReset() {
      this.form.resetFields()
    },

    /**
     提交表单
     * */
    submit(){
      const filterData = this.tableData.filter((item,index)=>this.selectedRowKeys.includes(index))
      this.$emit('selectSuccessDeposit',filterData)
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-table-small.ant-table-bordered .ant-table-content{
  border-right: none;
}
/deep/ .ant-modal-body{
  padding-bottom: 0px;
}
.col-form-item{
  padding: 0 4px  20px;
}
/deep/ .ant-modal-footer{
  border-top: none !important;
}
/deep/ .ant-table-small > .ant-table-content > .ant-table-body{
  margin: 0;
}
</style>

